<template>
  <div class="main">
    <u-navbar
      :background="{ backgroundColor: 'rgb(61, 95, 255)' }"
      :title="title"
      back-icon-color="#fff"
      title-color="#fff"
    >
    </u-navbar>

    <u-tabs
      :list="list"
      is-scroll
      :current="current"
      @change="change"
      active-color="rgb(1, 72, 51)"
      inactive-color="rgb(153, 153, 153)"
    ></u-tabs>
    <scroll-view
      :scroll-into-view="toView"
      scroll-with-animation
      scroll-y
      id="content"
      class="content"
      @scroll="handleScroll"
    >
      <div id="view1">
        <u-card
          box-shadow="0px 0px 8px #ddd6d6"
          :body-style="{ padding: '0 ' }"
          :head-style="{ padding: '28rpx 30rpx 20rpx' }"
          :head-border-bottom="false"
          class="u-m-0 u-m-t-20"
        >
          <view slot="head">
            <view class="u-flex head">
              <u-section
                title="基本情况"
                color="rgb(1, 72, 51)"
                font-size="30"
                :right="false"
              ></u-section>
            </view>
          </view>
          <view slot="body" class="m-l-10 m-r-10 m-b-10">
            <view class="proBox">
              <view>企业生产状态</view>
              <view style="font-weight: 700">{{ proState }}</view>
            </view>
          </view>
        </u-card>
      </div>
      
      <div id="view2" class="u-m-t-40">
        <u-card
          box-shadow="0px 0px 8px #ddd6d6"
          :body-style="{ padding: '0 ' }"
          :head-style="{ padding: '28rpx 30rpx 20rpx' }"
          :head-border-bottom="false"
          class="u-m-0 u-m-t-20"
        >
          <view slot="head">
            <view class="u-flex head">
              <u-section
                title="生产日报"
                color="rgb(1, 72, 51)"
                font-size="30"
                :right="false"
              ></u-section>
            </view>
          </view>
          <view slot="body">
            <div class="sctb-box">
              <div class="sctb-card">
                <div class="sctb-item-box">
                  <div class="gzm-item">
                    <div>
                      <span class="val">{{ produceInfo.dayDrivingLength }}</span
                      ><span class="unit">米</span>
                    </div>
                    <div>日进尺</div>
                  </div>
                  <div class="gzm-item">
                    <div>
                      <span class="val">{{
                        produceInfo.monthDrivingLength
                      }}</span
                      ><span class="unit">米</span>
                    </div>
                    <div>月累计进尺</div>
                  </div>
                  <div class="gzm-item">
                    <div>
                      <span class="val">{{
                        produceInfo.yearDrivingLength
                      }}</span
                      ><span class="unit">米</span>
                    </div>
                    <div>年累计进尺</div>
                  </div>
                </div>
              </div>

              <div class="sctb-card u-m-t-20">
                <div class="sctb-item-box">
                  <div class="gzm-item">
                    <div>
                      <span class="val">{{ produceInfo.dayCoalYield }}</span
                      ><span class="unit">万吨</span>
                    </div>
                    <div>日产量</div>
                  </div>
                  <div class="gzm-item">
                    <div>
                      <span class="val">{{ produceInfo.monthCoalYield }}</span
                      ><span class="unit">万吨</span>
                    </div>
                    <div>月累计产量</div>
                  </div>
                  <div class="gzm-item">
                    <div>
                      <span class="val">{{ produceInfo.yearCoalYield }}</span
                      ><span class="unit">万吨</span>
                    </div>
                    <div>年累计产量</div>
                  </div>
                </div>
              </div>
            </div>
          </view>
        </u-card>
      </div>

      <div id="view3" class="u-m-t-40">
        <u-card
          box-shadow="0px 0px 8px #ddd6d6"
          :body-style="{ padding: '0 ' }"
          :head-style="{ padding: '28rpx 30rpx 20rpx' }"
          :head-border-bottom="false"
          class="u-m-0 u-m-t-20"
        >
          <view slot="head">
            <view class="u-flex head">
              <u-section
                title="计划生产信息"
                color="rgb(1, 72, 51)"
                font-size="30"
                :right="false"
              ></u-section>
            </view>
          </view>
          <view slot="body">
            <u-tabs
              :list="listMonth1"
              is-scroll
              :current="currentJih"
              @change="changeJih"
              active-color="rgb(1, 72, 51)"
              inactive-color="rgb(153, 153, 153)"
              font-size="24"
            ></u-tabs>

            <div class="gzmqk jhsc-body">
              <div class="jhsc-title u-p-20">原煤生产</div>

              <div class="jhsc-box">
                <div class="gzm-box">
                  <div class="jhsc-name">计划</div>

                  <div class="gzm-item-bg">
                    <div>
                      <span class="val">{{ planAndProduce.cmYearPlan }}</span
                      ><span class="unit">万吨</span>
                    </div>
                    <div>年计划</div>
                    <u-line class="u-m-20"></u-line>
                    <div>
                      <span class="val">{{ planAndProduce.cmMonthPlan }}</span
                      ><span class="unit">万吨</span>
                    </div>
                    <div>月计划</div>
                  </div>
                </div>

                <div class="gzm-box gzm-box-kg">
                  <div class="jhsc-name">完成</div>

                  <div class="gzm-item-bg">
                    <div>
                      <span class="val">{{
                        planAndProduce.cmYearCoalYield
                      }}</span
                      ><span class="unit">万吨</span>
                    </div>
                    <div>年累计完成</div>
                    <u-line class="u-m-20"></u-line>
                    <div>
                      <span class="val">{{
                        planAndProduce.cmMonthCoalYield
                      }}</span
                      ><span class="unit">万吨</span>
                    </div>
                    <div>月累计完成</div>
                  </div>
                </div>
              </div>
            </div>

            <trendJj :customerId="opItem.customerId" chartNameType="1" />

            <div class="gzmqk jhsc-body">
              <div class="jhsc-title u-p-20">掘进进尺</div>

              <div class="jhsc-box">
                <div class="gzm-box">
                  <div class="jhsc-name">计划</div>

                  <div class="gzm-item-bg">
                    <div>
                      <span class="val">{{ planAndProduce.jjYearPlan }}</span
                      ><span class="unit">米</span>
                    </div>
                    <div>年计划</div>
                    <u-line class="u-m-20"></u-line>
                    <div>
                      <span class="val">{{ planAndProduce.jjMonthPlan }}</span
                      ><span class="unit">米</span>
                    </div>
                    <div>月计划</div>
                  </div>
                </div>

                <div class="gzm-box gzm-box-kg">
                  <div class="jhsc-name">完成</div>

                  <div class="gzm-item-bg">
                    <div>
                      <span class="val">{{
                        planAndProduce.jjYearDrivingLength
                      }}</span
                      ><span class="unit">米</span>
                    </div>
                    <div>年累计完成</div>
                    <u-line class="u-m-20"></u-line>
                    <div>
                      <span class="val">{{
                        planAndProduce.jjMonthDrivingLength
                      }}</span
                      ><span class="unit">米</span>
                    </div>
                    <div>月累计完成</div>
                  </div>
                </div>
              </div>
            </div>

            <trendJj :customerId="opItem.customerId" chartNameType="2" />
          </view>
        </u-card>
      </div>

      <div id="view4" class="u-m-t-40">
        <u-card
          box-shadow="0px 0px 8px #ddd6d6"
          :body-style="{ padding: '0 ' }"
          :head-style="{ padding: '28rpx 30rpx 20rpx' }"
          :head-border-bottom="false"
          class="u-m-0 u-m-t-20"
        >
          <view slot="head">
            <view class="u-flex head" @click="toMine">
              <u-section
                title="生产报警"
                color="rgb(1, 72, 51)"
                font-size="30"
              ></u-section>
            </view>
          </view>
          <view slot="body">
            <div
              class="scbj-box"
              v-for="(item, index) in alarmInfo"
              :key="index"
            >
              <div class="scbj-card">
                <u-collapse :accordion="false" ref="collapseView">
                  <u-collapse-item>
                    <template slot="title">
                      <view class="">
                        <view class="title">{{ item.engineeringName }}</view>
                      </view>
                    </template>

                    <div>
                      <div class="u-m-b-10">{{ item.alarmType }}</div>
                      <div class="u-m-b-10">{{ item.beginTime }}</div>
                      <div class="scbj-content">{{ item.alarmContent }}</div>
                    </div>
                  </u-collapse-item>
                </u-collapse>
              </div>
            </div>
          </view>
        </u-card>
      </div>

      <div id="view5" class="u-m-t-40">
        <u-card
          box-shadow="0px 0px 8px #ddd6d6"
          :body-style="{ padding: '0 ' }"
          :head-style="{ padding: '28rpx 30rpx 20rpx' }"
          :head-border-bottom="false"
          class="u-m-0 u-m-t-20"
        >
          <view slot="head">
            <view class="u-flex head">
              <u-section
                title="矿井三量"
                color="rgb(1, 72, 51)"
                font-size="30"
                :right="false"
              ></u-section>
            </view>
          </view>
          <view slot="body">
            <div class="kjsn-box">
              <div class="kjsn-card">
                <div
                  class="jinz"
                  :class="
                    fourInfo.openPeriodSituation === '1'
                      ? 'jinz2'
                      : fourInfo.openPeriodSituation === '2'
                      ? 'jinz1'
                      : 'jinz3'
                  "
                >
                  {{
                    fourInfo.openPeriodSituation === "1"
                      ? "正常"
                      : fourInfo.openPeriodSituation === "2"
                      ? "紧张"
                      : "临近紧张"
                  }}
                </div>
                <div>可采期情况</div>
                <u-line></u-line>
                <div>
                  <span class="val">{{ fourInfo.openPeriodNum }}</span
                  ><span class="unit">万吨</span>
                </div>
                <div>开拓煤量</div>
                <u-line></u-line>
                <div>
                  <span class="val">{{ fourInfo.openPeriod }}</span
                  ><span class="unit">年</span>
                </div>
                <div>可采期</div>
              </div>

              <div class="kjsn-card">
                <div
                  class="jinz"
                  :class="
                    fourInfo.preparePeriodSituation === '1'
                      ? 'jinz2'
                      : fourInfo.preparePeriodSituation === '2'
                      ? 'jinz1'
                      : 'jinz3'
                  "
                >
                  {{
                    fourInfo.preparePeriodSituation === "1"
                      ? "正常"
                      : fourInfo.preparePeriodSituation === "2"
                      ? "紧张"
                      : "临近紧张"
                  }}
                </div>
                <div>可采期情况</div>
                <u-line></u-line>
                <div>
                  <span class="val">{{ fourInfo.preparePeriodNum }}</span
                  ><span class="unit">万吨</span>
                </div>
                <div>准备煤量</div>
                <u-line></u-line>
                <div>
                  <span class="val">{{ fourInfo.preparePeriod }}</span
                  ><span class="unit">月</span>
                </div>
                <div>可采期</div>
              </div>

              <div class="kjsn-card">
                <div
                  class="jinz"
                  :class="
                    fourInfo.minePeriodSituation === '1'
                      ? 'jinz2'
                      : fourInfo.minePeriodSituation === '2'
                      ? 'jinz1'
                      : 'jinz3'
                  "
                >
                  {{
                    fourInfo.minePeriodSituation === "1"
                      ? "正常"
                      : fourInfo.minePeriodSituation === "2"
                      ? "紧张"
                      : "临近紧张"
                  }}
                </div>
                <div>可采期情况</div>
                <u-line></u-line>
                <div>
                  <span class="val">{{ fourInfo.minePeriodNum }}</span
                  ><span class="unit">万吨</span>
                </div>
                <div>回采煤量</div>
                <u-line></u-line>
                <div>
                  <span class="val">{{ fourInfo.minePeriod }}</span
                  ><span class="unit">月</span>
                </div>
                <div>可采期</div>
              </div>
            </div>
          </view>
        </u-card>
      </div>

      <div id="view6" class="u-m-t-40">
        <u-card
          box-shadow="0px 0px 8px #ddd6d6"
          :body-style="{ padding: '0 ' }"
          :head-style="{ padding: '28rpx 30rpx 20rpx' }"
          :head-border-bottom="false"
          class="u-m-0 u-m-t-20"
        >
          <view slot="head">
            <view class="u-flex head">
              <u-section
                title="煤层信息"
                color="rgb(1, 72, 51)"
                font-size="30"
                @click="toMineInfo"
              ></u-section>
            </view>
          </view>
          <view slot="body">
            <div class="u-p-l-20 u-p-r-20">
              <div class="cun-card">
                <div>
                  <span class="val">{{ coalMessage.coalNum }}</span
                  ><span class="unit">个</span>
                </div>
                <div>煤层数量</div>
              </div>
            </div>

            <div class="cun-box">
              <div class="cun-card">
                <div>
                  <span class="val">{{
                    coalMessage.accruedGeologyReserves
                  }}</span
                  ><span class="unit">万吨</span>
                </div>
                <div>原始地质储量累计</div>
              </div>
              <div class="cun-card">
                <div>
                  <span class="val">{{ coalMessage.accruedMineReserves }}</span
                  ><span class="unit">万吨</span>
                </div>
                <div>设计可采储量累计</div>
              </div>
            </div>
          </view>
        </u-card>
      </div>

      <div id="view7" class="u-m-t-40">
        <u-card
          box-shadow="0px 0px 8px #ddd6d6"
          :body-style="{ padding: '0 ' }"
          :head-style="{ padding: '28rpx 30rpx 20rpx' }"
          :head-border-bottom="false"
          class="u-m-0 u-m-t-20"
        >
          <view slot="head">
            <view class="u-flex head">
              <u-section
                title="储量变动情况"
                color="rgb(1, 72, 51)"
                font-size="30"
                :right="false"
              ></u-section>
            </view>
          </view>
          <view slot="body">
            <!-- <u-tabs :list="listMonth" is-scroll :current="currentCun" @change="changeCun" active-color="rgb(1, 72, 51)" inactive-color="rgb(153, 153, 153)" font-size="24"></u-tabs>

            <div class="cun-box">
              <div class="cun-card" v-for="obj in cunList">
                <div><span class="val">{{ obj.val }}</span><span class="unit">万吨</span></div>
                <div>{{ obj.name }}</div>
              </div>
            </div> -->

            <trend
              :customerId="opItem.customerId"
              :countyNo="opItem.countyNo"
            />
          </view>
        </u-card>
      </div>

      <div id="view8" class="u-m-t-40">
        <u-card
          box-shadow="0px 0px 8px #ddd6d6"
          :body-style="{ padding: '0 ' }"
          :head-style="{ padding: '28rpx 30rpx 20rpx' }"
          :head-border-bottom="false"
          class="u-m-0 u-m-t-20"
        >
          <view slot="head">
            <view class="u-flex head">
              <u-section
                title="工作面情况"
                color="rgb(1, 72, 51)"
                font-size="30"
                :right="false"
              ></u-section>
            </view>
          </view>
          <view slot="body">
            <div class="gzmqk">
              <div class="u-p-20">掘进（个）</div>

              <div class="gzm-box">
                <div class="gzm-title">
                  <div>正常工作面</div>
                  <div>
                    {{ zcgzmTotal }}
                    <u-icon
                      class="arrow-icon"
                      name="arrow-right"
                      @click="goGzm({ drivingMethod: '', type: '0' })"
                    >
                    </u-icon>
                  </div>
                </div>

                <div class="gzm-item-bg">
                  <div class="gzm-item-box">
                    <div
                      v-for="obj in zcgzm"
                      class="gzm-item"
                      @click="goGzm(obj)"
                    >
                      <div>{{ obj.val }}</div>
                      <div class="gzm-name">
                        {{ obj.txt
                        }}<u-icon
                          class="arrow-icon"
                          color="rgb(196, 196, 196)"
                          name="arrow-right"
                          size="20"
                        >
                        </u-icon>
                      </div>
                    </div>
                  </div>
                </div>
              </div>

              <div class="gzm-box gzm-box-zt">
                <div class="gzm-title">
                  <div>暂停工作面</div>
                  <div>
                    {{ ztgzmTotal }}
                    <u-icon
                      class="arrow-icon"
                      name="arrow-right"
                      @click="goZtGzm({ drivingMethod: '', type: '0' })"
                    >
                    </u-icon>
                  </div>
                </div>

                <div class="gzm-item-bg">
                  <div class="gzm-item-box">
                    <div
                      v-for="obj in ztgzm"
                      class="gzm-item"
                      @click="goZtGzm(obj)"
                    >
                      <div>{{ obj.val }}</div>
                      <div class="gzm-name">
                        {{ obj.txt
                        }}<u-icon
                          class="arrow-icon"
                          color="rgb(196, 196, 196)"
                          name="arrow-right"
                          size="20"
                        >
                        </u-icon>
                      </div>
                    </div>
                  </div>
                </div>
              </div>

              <div class="gzm-box gzm-box-kg">
                <div class="gzm-title">
                  <div>开工数量/完工数量</div>
                </div>

                <div class="gzm-item-bg">
                  <div class="gzm-item-box gzm-item-box1">
                    <div v-for="obj in kgsl" class="gzm-item">
                      <div>{{ obj.val }}/{{ obj.val1 }}</div>
                      <div class="gzm-name">{{ obj.txt }}</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <div class="gzmqk gzmqk-hc">
              <div class="u-p-20">回采（个）</div>

              <div class="gzm-box">
                <div class="gzm-title">
                  <div>正常工作面</div>
                  <div>
                    {{ zcgzm_hcTotal }}
                    <u-icon
                      class="arrow-icon"
                      name="arrow-right"
                      @click="goGzm({ drivingMethod: '', type: '1' })"
                    >
                    </u-icon>
                  </div>
                </div>

                <div class="gzm-item-bg">
                  <div
                    class="gzm-item-box"
                    style="grid-template-columns: 1fr 1fr 1fr 1fr 1fr"
                  >
                    <div
                      v-for="obj in zcgzm_hc"
                      class="gzm-item"
                      @click="goGzm(obj)"
                    >
                      <div>{{ obj.val }}</div>
                      <div class="gzm-name">
                        {{ obj.txt
                        }}<u-icon
                          class="arrow-icon"
                          color="rgb(196, 196, 196)"
                          name="arrow-right"
                          size="20"
                        >
                        </u-icon>
                      </div>
                    </div>
                  </div>
                </div>
              </div>

              <div class="gzm-box gzm-box-zt">
                <div class="gzm-title">
                  <div>暂停工作面</div>
                  <div>
                    {{ ztgzm_hcTotal }}
                    <u-icon
                      class="arrow-icon"
                      name="arrow-right"
                      @click="goZtGzm({ drivingMethod: '', type: '1' })"
                    >
                    </u-icon>
                  </div>
                </div>

                <div class="gzm-item-bg">
                  <div
                    class="gzm-item-box"
                    style="grid-template-columns: 1fr 1fr 1fr 1fr 1fr"
                  >
                    <div
                      v-for="obj in ztgzm_hc"
                      class="gzm-item"
                      @click="goZtGzm(obj)"
                    >
                      <div>{{ obj.val }}</div>
                      <div class="gzm-name">
                        {{ obj.txt
                        }}<u-icon
                          class="arrow-icon"
                          color="rgb(196, 196, 196)"
                          name="arrow-right"
                          size="20"
                        >
                        </u-icon>
                      </div>
                    </div>
                  </div>
                </div>
              </div>

              <div class="gzm-box gzm-box-kg">
                <div class="gzm-title">
                  <div>开工数量/完工数量</div>
                </div>

                <div class="gzm-item-bg">
                  <div class="gzm-item-box gzm-item-box1">
                    <div v-for="obj in kgsl_hc" class="gzm-item">
                      <div>{{ obj.val }}/{{ obj.val1 }}</div>
                      <div class="gzm-name">{{ obj.txt }}</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </view>
        </u-card>
      </div>

      <div id="view9" class="u-m-t-40">
        <u-card
          box-shadow="0px 0px 8px #ddd6d6"
          :body-style="{ padding: '0 ' }"
          :head-style="{ padding: '28rpx 30rpx 20rpx' }"
          :head-border-bottom="false"
          class="u-m-0 u-m-t-20"
        >
          <view slot="head">
            <view class="u-flex head">
              <u-section
                title="填报情况"
                color="rgb(1, 72, 51)"
                font-size="30"
                :right="false"
              ></u-section>
            </view>
          </view>
          <view slot="body">
            <view class="body_item">
              <view class="block">煤层信息</view>
              <view
                class="tbText"
                :class="
                  ['停产', '停建', '关闭', '长期停产停建'].includes(proState)
                    ? 'isWtb'
                    : 'isTb'
                "
                >{{ filledInfo.coalSeamFilledInfo }}</view
              >
            </view>
            <view class="body_item">
              <view class="block">储量动态</view>
              <view
                v-if="
                  ['停产', '停建', '关闭', '长期停产停建'].includes(proState)
                "
                class="tbText isWtb"
                >{{ filledInfo.resDynamicFilledInfo }}</view
              >
              <view
                v-if="
                  !['停产', '停建', '关闭', '长期停产停建'].includes(proState)
                "
                class="gary"
                >{{ filledInfo.resDynamicFilledInfo }}</view
              >
            </view>
            <view class="body_item">
              <view class="block">矿井三量</view>
              <view
                v-if="
                  ['停产', '停建', '关闭', '长期停产停建'].includes(proState)
                "
                class="tbText isWtb"
                >{{ filledInfo.fourFilledInfo }}</view
              >

              <view
                v-if="
                  !['停产', '停建', '关闭', '长期停产停建'].includes(proState)
                "
                class="gary"
                >{{ filledInfo.fourFilledInfo }}</view
              >
            </view>
            <view class="body_item">
              <view class="block">掘进年度计划</view>
              <view
                class="tbText"
                :class="
                  ['停产', '停建', '关闭', '长期停产停建'].includes(proState)
                    ? 'isWtb'
                    : 'isTb'
                "
                >{{ filledInfo.jjYearPlanFilledInfo }}</view
              >
            </view>
            <view class="body_item">
              <view class="block">回采年度计划</view>
              <view
                class="tbText"
                :class="
                  ['停产', '停建', '关闭', '长期停产停建'].includes(proState)
                    ? 'isWtb'
                    : 'isTb'
                "
                >{{ filledInfo.cmYearPlanFilledInfo }}</view
              >
            </view>
            <view class="body_item">
              <view class="block">掘进接续管理</view>
              <view
                v-if="filledInfo.jjSucceededPlanIsErrCode === '1'"
                class="ycColor tbText"
                >异常</view
              >
              <view
                class="tbText"
                :class="
                  ['停产', '停建', '关闭', '长期停产停建'].includes(proState)
                    ? 'isWtb'
                    : 'isTb'
                "
                >{{ filledInfo.jjSucceededPlanFilledInfo }}</view
              >
            </view>
            <view class="body_item">
              <view class="block">回采接续管理</view>
              <view
                v-if="filledInfo.cmSucceededPlanIsErrCode === '1'"
                class="ycColor tbText"
                >异常</view
              >
              <view
                class="tbText"
                :class="
                  ['停产', '停建', '关闭', '长期停产停建'].includes(proState)
                    ? 'isWtb'
                    : 'isTb'
                "
                >{{ filledInfo.cmSucceededPlanFilledInfo }}</view
              >
            </view>
            <view class="body_item">
              <view class="block">工作面生产</view>

              <view
                v-if="
                  ['停产', '停建', '关闭', '长期停产停建'].includes(proState)
                "
                class="tbText isWtb"
                >{{ filledInfo.produceFilledInfo }}</view
              >

              <view
                v-if="
                  !['停产', '停建', '关闭', '长期停产停建'].includes(proState)
                "
                class="gary"
                >{{ filledInfo.produceFilledInfo }}</view
              >
            </view>
            <view class="body_item">
              <view class="block">地测预报</view>
              <view
                class="tbText"
                :class="
                  ['停产', '停建', '关闭', '长期停产停建'].includes(proState)
                    ? 'isWtb'
                    : 'isTb'
                "
                >{{ filledInfo.groundFilledInfo }}</view
              >
            </view>
            <view class="body_item">
              <view class="block">探放水</view>
              <view
                class="tbText"
                :class="
                  ['停产', '停建', '关闭', '长期停产停建'].includes(proState)
                    ? 'isWtb'
                    : 'isTb'
                "
                >{{ filledInfo.waterFilledInfo }}</view
              >
            </view>
            <view class="body_item">
              <view class="block">区域防突</view>
              <view
                class="tbText"
                :class="
                  ['停产', '停建', '关闭', '长期停产停建'].includes(proState)
                    ? 'isWtb'
                    : 'isTb'
                "
                >{{ filledInfo.regionOutBurstFilledInfo }}</view
              >
            </view>
            <view class="body_item">
              <view class="block">局部防突</view>
              <view
                class="tbText"
                :class="
                  ['停产', '停建', '关闭', '长期停产停建'].includes(proState)
                    ? 'isWtb'
                    : 'isTb'
                "
                >{{ filledInfo.partOutBurstFilledInfo }}</view
              >
            </view>
          </view>
        </u-card>
      </div>
    </scroll-view>

    <u-picker
      mode="selector"
      v-model="cityShow"
      :range="cityList"
      @confirm="cityConfirm"
      range-key="label"
    ></u-picker>
  </div>
</template>

<script>
import trend from "@/pages/cjt/basicInformation/trend/index.vue";
import trendJj from "@/pages/cjt/basicInformation/trendJj/index.vue";
export default {
  components: { trend, trendJj },
  data() {
    return {
      cunList: [
        { name: "原始地质储量", val: "0" },
        { name: "设计可采储量", val: "0" },
        { name: "地质储量变动", val: "0" },
        { name: "可采储量变动", val: "0" },
        { name: "矿井采出量", val: "0" },
        { name: "矿井损失量", val: "0" },
        { name: "设计回采率", val: "0" },
        { name: "实际回采率", val: "0" },
        { name: "期末保有地质储量", val: "0" },
        { name: "期末保有可采储量", val: "0" },
      ],
      listMonth: [
        { name: "01" },
        { name: "02" },
        { name: "03" },
        { name: "04" },
        { name: "05" },
        { name: "06" },
        { name: "07" },
        { name: "08" },
        { name: "09" },
        { name: "10" },
        { name: "11" },
        { name: "12" },
      ],
      listMonth1: [
        { name: "1月" },
        { name: "2月" },
        { name: "3月" },
        { name: "4月" },
        { name: "5月" },
        { name: "6月" },
        { name: "7月" },
        { name: "8月" },
        { name: "9月" },
        { name: "10月" },
        { name: "11月" },
        { name: "12月" },
      ],
      cityShow: false,
      currentJih: 0,
      currentCun: 0,
      current: 0,
      toView: "",
      topDistance: 112,
      list: [
        { name: "基本情况" },
        { name: "生产日报" },
        { name: "计划生产信息" },
        { name: "生产报警" },
        { name: "矿井三量" },
        { name: "煤层信息" },
        { name: "储量变动情况" },
        { name: "工作面情况" },
        { name: "填报情况" },
      ],
      cityList: [],
      searchData: {},
      zcgzmTotal: 0,
      ztgzmTotal: 0,
      zcgzm: [],
      ztgzm: [],
      kgsl: [],
      zcgzm_hcTotal: 0,
      ztgzm_hcTotal: 0,
      zcgzm_hc: [],
      ztgzm_hc: [],
      kgsl_hc: [],
      produceInfo: {},
      planAndProduce: {},
      opItem: {},
      alarmInfo: [],
      fourInfo: {},
      coalMessage: {},
      title: "",
      proState: "",
      filledInfo: {},
    };
  },
  async onLoad(options) {
    this.currentJih = new Date().getMonth();
    // this.currentCun=new Date().getMonth()
    // this.listMonth.forEach(element => {
    //   element.name = new Date().getFullYear()+'-'+element.name
    // });
    const item = JSON.parse(options.item);
    console.log('item',item);
    
    this.opItem = item;
    this.title = this.opItem.customerName;
    // 获取生产填报信息
    this.getCustomerProduceInfo(item);
    let num = 0;
    if (this.currentJih < 9) {
      num = "0" + (this.currentJih + 1);
    } else {
      num = this.currentJih + 1;
    }
    this.planAndProduceByMonth(item, new Date().getFullYear() + "-" + num);
    // 查看报警信息未结束前三条
    this.getCustomerAlarmInfoByThree(item);
    // 矿井三量
    this.getCustomerFourInfo(item);
    // 煤层信息
    this.getCustomerCoalMessage(item);
    // 工作面情况
    this.statisticEngInfo();
    // 获取企业生产状态
    this.getCustomerState();
    // 填报情况
    this.customerFilledInfo();
  },
  mounted(){
    const query = uni.createSelectorQuery().in(this);
    query
      .select("#content")
      .boundingClientRect((res) => {
        this.topDistance = res.top
      })
      .exec();
  },
  methods: {
    customerFilledInfo() {
      this.$form("/cjt/app/customerFilledInfo", {
        customerId: this.opItem.customerId,
      }).then((res) => {
        this.filledInfo = res.body;
      });
    },
    getCustomerState() {
      this.$get(
        "/cjt/common/getCustomerState?customerId=" + this.opItem.customerId
      ).then((res) => {
        this.proState = res.body;
      });
    },
    toMine() {
      uni.navigateTo({
        url: `/pages/cjt/basicInformation/mineList/alarmList?customerId=${this.opItem.customerId}&countyNo=${this.opItem.countyNo}&customerName=${this.opItem.customerName}`,
      });
    },
    toMineInfo() {
      uni.navigateTo({
        url: `/pages/cjt/basicInformation/mineList/coalList?customerId=${this.opItem.customerId}&countyNo=${this.opItem.countyNo}&customerName=${this.opItem.customerName}`,
      });
    },
    statisticEngInfo() {
      let data = {
        countyNo: this.opItem.countyNo,
        customerId: this.opItem.customerId,
      };
      this.$post("/cjt/app/statisticEngInfo", data).then((res) => {
        let jjInfo = res.body.jjInfo;
        this.zcgzmTotal = jjInfo.zcEngSum;
        this.ztgzmTotal = jjInfo.ztEngSum;
        let cmInfo = res.body.cmInfo;
        this.zcgzm_hcTotal = cmInfo.zcEngSum;
        this.ztgzm_hcTotal = cmInfo.ztEngSum;
        (this.zcgzm = [
          {
            val: jjInfo.zcBlastingEngCount,
            txt: "炮掘",
            drivingMethod: "001",
            type: "0",
          },
          {
            val: jjInfo.zcComprehensiveEngCount,
            txt: "综掘",
            drivingMethod: "002",
            type: "0",
          },
          {
            val: jjInfo.zcOtherEngCount,
            txt: "其他",
            drivingMethod: "099",
            type: "0",
          },
          {
            val: jjInfo.zcIntelligentEngCount,
            txt: "智能化",
            drivingMethod: "999",
            type: "0",
          },
        ]),
          (this.ztgzm = [
            {
              val: jjInfo.ztBlastingEngCount,
              txt: "炮掘",
              drivingMethod: "001",
              type: "0",
            },
            {
              val: jjInfo.ztComprehensiveEngCount,
              txt: "综掘",
              drivingMethod: "002",
              type: "0",
            },
            {
              val: jjInfo.ztOtherEngCount,
              txt: "其他",
              drivingMethod: "099",
              type: "0",
            },
            {
              val: jjInfo.ztIntelligentEngCount,
              txt: "智能化",
              drivingMethod: "999",
              type: "0",
            },
          ]);
        (this.kgsl = [
          {
            val: jjInfo.thisMonthStartCount,
            val1: jjInfo.thisMonthEndCount,
            txt: "本月",
          },
          {
            val: jjInfo.thisYearStartCount,
            val1: jjInfo.thisYearEndCount,
            txt: "本年",
          },
        ]),
          (this.zcgzm_hc = [
            {
              val: cmInfo.zcBlastingEngCount,
              txt: "炮采",
              drivingMethod: "001",
              type: "1",
            },
            {
              val: cmInfo.zcComprehensiveEngCount,
              txt: "综采",
              drivingMethod: "005",
              type: "1",
            },
            {
              val: cmInfo.zcOrdinaryEngCount,
              txt: "普采",
              drivingMethod: "006",
              type: "1",
            },
            {
              val: cmInfo.zcOtherEngCount,
              txt: "其他",
              drivingMethod: "099",
              type: "1",
            },
            {
              val: cmInfo.zcIntelligentEngCount,
              txt: "智能化",
              drivingMethod: "009",
              type: "1",
            },
          ]),
          (this.ztgzm_hc = [
            {
              val: cmInfo.ztBlastingEngCount,
              txt: "炮采",
              drivingMethod: "001",
              type: "1",
            },
            {
              val: cmInfo.ztComprehensiveEngCount,
              txt: "综采",
              drivingMethod: "005",
              type: "1",
            },
            {
              val: cmInfo.ztOrdinaryEngCount,
              txt: "普采",
              drivingMethod: "006",
              type: "1",
            },
            {
              val: cmInfo.ztOtherEngCount,
              txt: "其他",
              drivingMethod: "009",
              type: "1",
            },
            {
              val: cmInfo.ztIntelligentEngCount,
              txt: "智能化",
              drivingMethod: "999",
              type: "1",
            },
          ]);
        this.kgsl_hc = [
          {
            val: cmInfo.thisMonthStartCount,
            val1: cmInfo.thisMonthEndCount,
            txt: "本月",
          },
          {
            val: cmInfo.thisYearStartCount,
            val1: cmInfo.thisYearEndCount,
            txt: "本年",
          },
        ];
      });
    },
    goGzm(obj) {
      let data = {
        countyNo: this.opItem.countyNo,
        type: obj.type,
        drivingMethod: obj.drivingMethod,
        currentStatus: "0",
        customerNo: this.opItem.customerNo || this.opItem.customerId,
        customerName: this.opItem.customerName,
      };
      uni.navigateTo({
        url: `/pages/cjt/basicInformation/gzm/index?data=${JSON.stringify(
          data
        )}`,
      });
    },
    goZtGzm(obj) {
      let data = {
        countyNo: this.opItem.countyNo,
        type: obj.type,
        drivingMethod: obj.drivingMethod,
        currentStatus: "1",
        customerNo: this.opItem.customerNo || this.opItem.customerId,
        customerName: this.opItem.customerName,
      };
      uni.navigateTo({
        url: `/pages/cjt/basicInformation/gzm/index?data=${JSON.stringify(
          data
        )}`,
      });
    },
    getCustomerFourInfo(item) {
      this.$form("/cjt/app/getCustomerFourInfo", {
        customerId: item.customerId,
      }).then((res) => {
        this.fourInfo = res.body;
      });
    },
    getCustomerCoalMessage(item) {
      this.$form("/cjt/app/getCustomerCoalMessage", {
        customerId: item.customerId,
      }).then((res) => {
        this.coalMessage = res.body;
      });
    },
    getCustomerAlarmInfoByThree(item) {
      this.$form("/cjt/app/getCustomerAlarmInfoByThree", {
        customerId: item.customerId,
      }).then((res) => {
        this.alarmInfo = res.body;
      });
    },
    getCustomerProduceInfo(item) {
      this.$post("/cjt/app/getCustomerProduceInfo", {
        customerId: item.customerId,
      }).then((res) => {
        this.produceInfo = res.body;
      });
    },
    planAndProduceByMonth(item, month) {
      this.$post("/cjt/app/planAndProduceByMonth", {
        customerId: item.customerId,
        month: month,
      }).then((res) => {
        this.planAndProduce = res.body;
      });
    },
    cityConfirm(index) {
      this.searchData.cityStr = this.cityList[index].label;
    },
    changeJih(index) {
      this.currentJih = index;
      let num = 0;
      if (this.currentJih < 9) {
        num = "0" + (this.currentJih + 1);
      } else {
        num = this.currentJih + 1;
      }
      this.planAndProduceByMonth(
        this.opItem,
        new Date().getFullYear() + "-" + num
      );
    },
    // changeCun (index) {
    //   this.currentCun = index;
    //   this.statisticReserveDynamic(this.opItem,new Date().getFullYear()+'-'+(this.currentCun+1))
    // },
    change(index) {
      this.current = index;
      this.toView = `view${index + 1}`;
    },
    handleScroll({ detail }) {
      // 112 是scroll-view到顶部的距离
      const query = uni.createSelectorQuery().in(this);
      query
        .select("#view1")
        .boundingClientRect((res) => {
          if (res.bottom - this.topDistance > 0 && res.top - this.topDistance < 0) {
            this.current = 0;
          }
        })
        .exec();
      query
        .select("#view2")
        .boundingClientRect((res) => {
          if (res.bottom - this.topDistance > 0 && res.top - this.topDistance < 0) {
            this.current = 1;
          }
        })
        .exec();
      query
        .select("#view3")
        .boundingClientRect((res) => {
          if (res.bottom - this.topDistance > 0 && res.top - this.topDistance < 0) {
            this.current = 2;
          }
        })
        .exec();
      query
        .select("#view4")
        .boundingClientRect((res) => {
          if (res.bottom - this.topDistance > 0 && res.top - this.topDistance < 0) {
            this.current = 3;
          }
        })
        .exec();
      query
        .select("#view5")
        .boundingClientRect((res) => {
          if (res.bottom - this.topDistance > 0 && res.top - this.topDistance < 0) {
            this.current = 4;
          }
        })
        .exec();
      query
        .select("#view6")
        .boundingClientRect((res) => {
          if (res.bottom - this.topDistance > 0 && res.top - this.topDistance < 0) {
            this.current = 5;
          }
        })
        .exec();
      query
        .select("#view7")
        .boundingClientRect((res) => {
          if (res.bottom - this.topDistance > 0 && res.top - this.topDistance < 0) {
            this.current = 6;
          }
        })
        .exec();
      query
        .select("#view8")
        .boundingClientRect((res) => {
          if (res.bottom - this.topDistance > 0 && res.top - this.topDistance < 0) {
            this.current = 7;
          }
        })
        .exec();
      query
        .select("#view9")
        .boundingClientRect((res) => {
          if (res.bottom - this.topDistance > 0 && res.top - this.topDistance < 0) {
            this.current = 8;
          }
        })
        .exec();
    },
  },
};
</script>

<style lang="scss" scoped>
.content {
  padding: 20rpx;
  flex: 1;
  overflow: auto;
  box-sizing: border-box;
}

.mine-num {
  text-align: center;
  height: 66px;
  background: #fff;
  line-height: 60px;
  color: #fff;
  background: url("/static/image/cjt/cjnxzc.png");
  background-size: 100% 100%;

  .mine-num-val {
    font-size: 30px;
    margin-left: 10px;
    position: relative;
    top: 2px;
  }
}

.head {
  padding-bottom: 24rpx;
  border-bottom: 2rpx solid #f6f6f6;
}

.gzmqk {
  background: linear-gradient(rgb(243, 247, 255), rgba(255, 255, 255, 0));
  border-radius: 6px 6px 0 0;
}

.gzm-box {
  background: linear-gradient(
    rgba(10, 207, 151, 0.5),
    rgba(167, 238, 217, 0.5)
  );
  margin: 10px;
  margin-top: 0;
  border-radius: 6px;
  padding-bottom: 3px;

  .gzm-item-bg {
    padding-top: 10px;
    background: #fff;
    margin-left: 3px;
    margin-right: 3px;
    padding-bottom: 10px;
    border-radius: 6px;

    .gzm-item-box {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr 1fr;
      background: rgba(207, 207, 207, 0.5);
      grid-column-gap: 1px;

      .gzm-item {
        text-align: center;
        background: #fff;
        padding-top: 10px;
        padding-bottom: 10px;

        .gzm-name {
          font-size: 12px;
          margin-top: 10px;
        }
      }
    }

    .gzm-item-box1 {
      grid-template-columns: 1fr 1fr;
    }

    .gzm-item-box2 {
      grid-template-columns: 1fr 1fr 1fr;
    }
  }
}

.gzm-box-zt {
  background: linear-gradient(rgba(210, 158, 8, 0.5), rgba(239, 220, 166, 0.5));
}

.gzm-box-kg {
  background: linear-gradient(rgb(204, 239, 255), rgba(224, 249, 255, 0.85));
}

.gzm-box-jx {
  background: linear-gradient(rgb(255, 158, 80), rgb(254, 177, 51));
}

.gzm-box-lj {
  background: linear-gradient(rgba(255, 191, 60, 0.5), rgba(255, 191, 60, 0.5));
}

.gzm-title {
  display: flex;
  justify-content: space-between;
  padding: 10px;
}

.gzmqk-hc {
  background: linear-gradient(rgb(255, 250, 242), rgba(255, 250, 242, 0));
}

.cun-box {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 10px;
  padding: 10px;
}

.cun-card {
  box-shadow: 0 0 10px 0 rgba(1, 72, 51, 0.2) !important;
  border-radius: 6px !important;
  height: 70px;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;

  .val {
    font-size: 20px;
    font-weight: 700;
    margin-right: 0.2em;
    color: #333;
  }
}

.kjsn-box {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 10px;
  padding: 10px;
  padding-top: 0;

  .kjsn-card {
    box-shadow: 0 0 10px 0 rgba(1, 72, 51, 0.2) !important;
    border-radius: 6px !important;
    height: 190px;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    padding: 0 10px;

    .jinz {
      font-size: 16px;
    }

    .jinz1 {
      color: rgb(255, 158, 80);
    }

    .jinz2 {
      color: rgb(10, 207, 151);
    }

    .jinz3 {
      color: rgb(255, 191, 60);
    }

    .val {
      font-size: 20px;
      font-weight: 700;
      margin-right: 0.2em;
      color: #333;
    }
  }
}
.unit {
  color: #666;
}
.scbj-box {
  padding: 10px;
  padding-top: 0;

  .scbj-card {
    box-shadow: 0 0 10px 0 rgba(1, 72, 51, 0.2) !important;
    border-radius: 6px !important;
    padding: 10px;
    padding-top: 0;

    .scbj-content {
      color: rgb(51, 51, 51);
    }
  }
}

.jhsc-body {
  .gzm-box {
    margin: 0;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
  }
  .jhsc-title {
    font-size: 15px;
    font-weight: 600;
    color: #333;
  }
  .jhsc-box {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 10px;
    padding: 10px;
    padding-top: 0;

    .val {
      font-size: 20px;
      font-weight: 700;
      margin-right: 0.2em;
      color: #333;
    }

    .jhsc-name {
      padding: 10px;
      text-align: center;
      font-size: 15px;
      font-weight: 500;
      color: #333;
    }
  }
}

.sctb-box {
  padding: 10px;
  padding-top: 0;

  .sctb-card {
    box-shadow: 0 0 10px 0 rgba(1, 72, 51, 0.2) !important;
    border-radius: 6px !important;
    padding: 10px;
    background: #fff;

    .sctb-item-box {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      background: rgba(207, 207, 207, 0.5);
      grid-column-gap: 1px;

      .gzm-item {
        text-align: center;
        background: #fff;

        .val {
          font-size: 20px;
          font-weight: 700;
          margin-right: 0.2em;
          color: #333;
        }
      }
    }

    .gzm-item-box1 {
      grid-template-columns: 1fr 1fr;
    }

    .gzm-item-box2 {
      grid-template-columns: 1fr 1fr 1fr;
    }
  }
}
.body_item {
  // width: 100%;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 0 10px 0 rgba(1, 72, 51, 0.2);
  padding: 15px;
  margin: 10px;
  .block {
    color: #333 !important;
  }
}
.proBox {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #fff;
  width: 100%;
  height: auto;
  border-radius: 4px;
  padding: 10px;
  box-shadow: 0 0 10px 0 rgba(1, 72, 51, 0.2);
}
.tbText {
  color: #fff;
  padding: 2px 5px;
  border-radius: 2px;
  font-size: 10px;
}
.isWtb {
  background: #ff0000;
}
.isTb {
  background: #0acf97;
}
.ycColor {
  background: #e3c728;
}
.gary {
  color: #999;
  font-size: 12px;
}
</style>
